<template>
  <div class="home">
    <van-tabbar v-model="active" class="active_tab">
    <van-tabbar-item
      v-for="(item,index) in tabbars"
      :key="index"
      @click="tab(index,item.name)"
    >
      <span :class="currIndex == index ? active:''">{{item.title}}</span>
      <template slot="icon" slot-scope="props">
        <img :src="props.active ? item.active : item.normal">
      </template>
    </van-tabbar-item>
  </van-tabbar>
  </div>
</template>
<script>
export default {
   data() {
    return {
      currIndex: 0,
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "首页",
          normal: require("../assets/image/shouye1.png"),
          active: require("../assets/image/shouye.png")
        },
        {
          name: "message",
          title: "菜单",
          normal: require("../assets/image/caidan1.png"),
          active: require("../assets/image/caidan.png")
        },
        {
          name: "cart",
          title: "购物车",
           normal: require("../assets/image/gouwuche1.png"),
          active: require("../assets/image/gouwuche.png")
        },
        {
          name: "mine",
          title: "我的",
           normal: require("../assets/image/wode1.png"),
          active: require("../assets/image/wode.png")
        }
      ]
    };
  },
  methods: {
    tab(index, val) {
      this.currIndex = index;
      // this.$router.push(val);
    }
  },
}
</script>

<style scoped>
.home .active_tab{
  background-color: #999;
}
.van-tabbar-item{
   color: #cdcdcd;
 }
.van-tabbar-item--active {
  color: #1989fa;
}
</style>
